<template>
  <div class="settings-container">
    <!-- Settings Header -->
    <div class="settings-header">
      <div class="header-icon">
        <span v-html="settingsIcon" class="icon" />
      </div>
      <div class="header-content">
        <h1 class="header-title">Settings</h1>
        <p class="header-subtitle">Configure your SideX extension preferences.</p>
      </div>
    </div>

    <!-- General Settings -->
    <div class="settings-section">
      <h2 class="section-title">General Settings</h2>

      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">Auto-open Side Panel</label>
          <p class="setting-description">
            Automatically open side panel on new tabs
          </p>
        </div>
        <label class="toggle-switch">
          <input
            v-model="settings.autoOpenSidePanel"
            type="checkbox"
            @change="saveSettings"
          >
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">Show Floating Button</label>
          <p class="setting-description">
            Display floating button on web pages
          </p>
        </div>
        <label class="toggle-switch">
          <input
            v-model="settings.showFloatingButton"
            type="checkbox"
            @change="saveSettings"
          >
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">Debug Mode</label>
          <p class="setting-description">
            Enable console logging for debugging
          </p>
        </div>
        <label class="toggle-switch">
          <input
            v-model="settings.debugMode"
            type="checkbox"
            @change="saveSettings"
          >
          <span class="toggle-slider"></span>
        </label>
      </div>
    </div>

    <!-- Appearance Settings -->
    <div class="settings-section">
      <h2 class="section-title">Appearance</h2>

      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">Theme</label>
          <p class="setting-description">Choose your preferred theme</p>
        </div>
        <select
          v-model="settings.theme"
          class="setting-select"
          @change="saveSettings"
        >
          <option value="auto">Auto (System)</option>
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">Font Size</label>
          <p class="setting-description">Adjust the text size</p>
        </div>
        <select
          v-model="settings.fontSize"
          class="setting-select"
          @change="saveSettings"
        >
          <option value="small">Small</option>
          <option value="medium">Medium</option>
          <option value="large">Large</option>
        </select>
      </div>
    </div>

    <!-- Save Status -->
    <div
      v-if="saveStatus"
      class="save-notification"
    >
      <span v-html="checkIcon" class="notification-icon" />
      Settings saved successfully!
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { INLINE_ICONS } from '../../assets/icons';

// 图标计算属性
const settingsIcon = computed(() => INLINE_ICONS.settings)
const checkIcon = computed(() => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="20,6 9,17 4,12"></polyline>
</svg>`)

// Settings data
const settings = reactive({
  autoOpenSidePanel: false,
  showFloatingButton: true,
  debugMode: false,
  theme: 'auto',
  fontSize: 'medium'
});

const saveStatus = ref(false);

// Methods
const loadSettings = async () => {
  try {
    const result = await chrome.storage.local.get(['sidexSettings']);
    if (result.sidexSettings) {
      Object.assign(settings, result.sidexSettings);
    }
  } catch (error) {
    console.error('Error loading settings:', error);
  }
};

const saveSettings = async () => {
  try {
    await chrome.storage.local.set({ sidexSettings: { ...settings } });
    showSaveStatus();
  } catch (error) {
    console.error('Error saving settings:', error);
  }
};

const showSaveStatus = () => {
  saveStatus.value = true;
  setTimeout(() => {
    saveStatus.value = false;
  }, 3000);
};

// Initialize
onMounted(() => {
  loadSettings();
});
</script>

<style scoped>
.settings-container {
  padding: 24px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, var(--primary-color), #667eea);
  border-radius: 16px;
  color: white;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.header-icon .icon {
  width: 24px;
  height: 24px;
  color: white;
}

.header-content {
  flex: 1;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

.settings-section {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 20px 0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-label {
  display: block;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 4px;
  font-size: 14px;
}

.setting-description {
  color: var(--secondary-color);
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.setting-select {
  min-width: 120px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--surface-color);
  color: var(--text-color);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.setting-select:focus {
  border-color: var(--primary-color);
}

.save-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--success-color, #10b981);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 暗色主题支持 */
[data-theme="dark"] .toggle-slider {
  background-color: #4a5568;
}

[data-theme="dark"] .setting-select {
  background-color: var(--surface-color);
  border-color: var(--border-color);
}
</style>
